<template>
  <div>
    <CityHeader></CityHeader>
    <CitySearch :cities="cities"></CitySearch>
    <CityList
      :cities="cities"
      :hot="hotCities"
      :letter="letter"
    ></CityList>
    <CityAlphabet
      :cities="cities"
      @change="handleLetterChange"
    ></CityAlphabet>
  </div>
</template>

<script>
  import CityHeader from './components/Header'
  import CitySearch from './components/Search'
  import CityList from './components/List'
  import CityAlphabet from './components/Alphabet'
  import axios from 'axios'

  export default {
    data() {
      return {
        cities: {},
        hotCities: [],
        letter: ''
      }
    },
    components: {
      CityHeader,
      CitySearch,
      CityList,
      CityAlphabet
    },
    methods: {
      getCityInfo() {
        axios.get('/api/city.json')
          .then(this.handleGetCityInfoSucc)
      },
      handleGetCityInfoSucc(res) {
        res = res.data
        if (res.ret && res.data) {
          const data = res.data
          this.cities = data.cities
          this.hotCities = data.hotCities
        }
      },
      handleLetterChange(letter) {
        this.letter = letter
      }
    },
    watch: {},
    mounted() {
      this.getCityInfo()
    }
  }
</script>

<style scoped lang="stylus" type="text/stylus">

</style>
